<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Json2Dart</title>

    <style>
        * {
            
            padding: 0px;
            margin: 0px;
            text-shadow: -5px 5px 0 rgba(0,0,0,.1);
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;

            background-color: #27ae60;

            display: flex;
            flex-direction: column;
        }

        header {
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: white;
            border-top: solid 1px #27ae60;
            box-shadow: 0px 0px 10px #737373;
        }

        #content {
            flex-grow: 1;
            display: flex;
            flex-direction: row;
        }

        footer {
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: white;
            border-top: solid 1px #27ae60;
            box-shadow: 0px 0px 10px #737373;
        }
         h6 a{
            color: white;
        }

        #json {
            width: 38.2%;
            background-color: white;
            text-shadow: 0px 0px 10px #d7ffe8;
            padding: 15px;
            overflow-y: auto;
            border: 1px solid #ddd;
        }

        #class {
            width: 61.8%;
            background-color: white;
            text-shadow: 0px 0px 10px #d7ffe8;
            /* padding-left: 60px; */
            overflow-y: auto;
            border: 1px solid #dddddd;
            padding: 15px;
        }

        #button-panel {
            position: fixed;
            width: 10px;
            bottom: 60px;
            top: 60px;
            left: 38.2%;
            margin-left: -5px;
            /* background-color: rgba(255, 255, 0, 0.13); */

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #button {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color:#fbfbfb;
            border-radius: 50px;

            text-align: center;
            line-height: 100px;

            /* color: #000000; */

            cursor: pointer;

            box-shadow: 0px 0px 10px #989e9b;
        }

        #console {
            height: 130px;
            background-color: #F5F5F5;
            overflow-y: auto;
            padding:0 15px;
            color: #000000;
            font-size: 15px;
        }
    </style>

    <script>
        let jsonDom = document.getElementById("json")
        let classDom = document.getElementById("class")

        const init = () => {
            window.consoleDom = document.getElementById("console")
            jsonDom = document.getElementById("json")
            classDom = document.getElementById("class")

            jsonDom.value = JSON.stringify({
                name: "TughluQ software technologys",
                members: [
                    {
                        name: "مۇختەر",
                        age: 24,
                        email: "yeganaaa@163.com",
                        friend: {
                            name: "نۇرى",
                            address: "urumqi xinjiang china"
                        }
                    },
                    {
                        name: "noya",
                        age: 22,
                        email: "xxxx",
                        friend: null
                    },
                    {
                        name: "Ahmetjan",
                        age: 19,
                        email: "xxxx",
                        friend: null
                    },
                ],
                admins: [
                    {
                        name: "TughluQ CEO",
                        email: "xxxx",
                    }
                ]
            })
        }

        const page = {
            log(message, override) {
                if (override == undefined || override == null) override = false
                if (override){
                    window.consoleDom.innerHTML = message
                }
                else {
                    window.consoleDom.innerHTML += `<br>${message}`
                }
            }
        }

        const format = () => {
            try {
                let json = jsonDom.value;
                json = JSON.parse(json)
                jsonDom.value = JSON.stringify(json, null, 3)

                page.log("Format success.")
            }
            catch(exception){
                page.log(exception, true)
            }
        }

        const convert = () => {
            const ajax = new XMLHttpRequest()
            let className = prompt("Root class mame", "RootClass")
            let url = `/Generate?json=${jsonDom.value}&rootClassName=${className}`
            ajax.open("GET", url)
            ajax.send()

            page.log("sending request...")

            ajax.onloadend = progress => {
                classDom.value =  ajax.responseText
                page.log("generated seccessfully, you can press CTRL+A to select all and CTRL+C to copy it.")
            }
        }

    </script>
</head>

<body onload="init()">
    <div id="container">
        <header>
            <h4 style="text-align: center;">Json to Dart (Dart class generator)</h4>
        </header>
        <div id="content">
            <textarea contenteditable id="json"></textarea>
            <div id="button-panel">
                <div id="button" onclick="format()">Format</div>
                <div id="button" onclick="convert()">Convert</div>
            </div>
            <textarea contenteditable id="class"></textarea>
        </div>
        <div id="console">

        </div>
        <footer>
            <h6 style="text-align: center;">Json to Dart (Dart class generator) &nbsp; &nbsp; <a href="https://gitee.com/yeganaaa/Json2Dart-Generator">Star me on gitee</a> &nbsp;&nbsp;&nbsp; <a href="/Generate?json={&quot;name&quot; : &quot;yeganaaa&quot;, &quot;age&quot; : 24}&rootClassName=Person">use
                    api for: /Generate?json={&quot;name&quot; : &quot;yeganaaa&quot;, &quot;age&quot; :
                    24}&rootClassName=Person</a></h6>
        </footer>
    </div>

</body>

</html>